<template>
    <div class="h-full flex flex-col">
        <el-form :inline="true" :model="searchform" style="width:100%">
            <div class="flex justify-between w-full">
                <el-form-item>
                    <el-button type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
                    <el-button :icon="Refresh" @click="getList">刷新</el-button>
                </el-form-item>
                <el-space>
                    <el-form-item label="用户名">
                        <el-input v-model="searchform.nickname" placeholder="请输入用户名" clearable style="width:200px;"/>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input v-model="searchform.phone" placeholder="请输入用户名" clearable style="width:200px;"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="getList" :icon="Search">查询</el-button>
                        <el-button @click="onRefresh" :icon="Refresh">重置</el-button>
                    </el-form-item>
                </el-space>
            </div>
        </el-form>
        <div class="table-section grid" style="height:calc(100% - 40px - 50px);margin-bottom:10px;">
            <el-table border :data="tableData.list" style="height:100%">
                <el-table-column prop="id" label="用户id" width="80px" align="center"/>
                <el-table-column prop="avatar" label="头像" width="80px" align="center">
                    <template #default="scope">
                        <el-image v-if="scope.row.avatarUrl" class="rounded-md" style="width: 40px; height: 40px" :src="scope.row.avatarUrl" :preview-src-list="[scope.row.avatarUrl]" preview-teleported></el-image>
                        <el-image :src="avatar" v-else class="rounded-md" style="width: 40px; height: 40px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="用户名称" align="center"/>
                <el-table-column prop="sex" label="用户性别" align="center">
                    <template v-slot="scope">
                        <el-tag v-if="scope.row.sex === 1" type="primary">男</el-tag>
                        <el-tag v-else-if="scope.row.sex === 2" type="danger">女</el-tag>
                        <el-tag v-else type="info">未知</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号码" align="center"/>
                <el-table-column prop="currentPoints" label="当前积分" align="center">
                    <template #default="scope">
                        <el-popover placement="right" :width="240" trigger="hover" @before-enter="popoverShow(scope.row)">
                            <template #reference>
                                <span style="cursor:pointer; color:#409EFF">{{ scope.row.currentPoints }}</span>
                            </template>
                            <div class="edit-points">
                                <div class="edit-title">修改用户当前积分</div>
                                <el-space>
                                    <el-input-number :min="0" v-model="currentPoints" placeholder="请输入积分" clearable></el-input-number>
                                    <el-button type="primary" @click="updateCurrentPoints(scope.row)">确定</el-button>
                                </el-space>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="utr" label="自评UTR" align="center"/>
                <el-table-column prop="createdAt" label="创建时间" align="center"/>
                <el-table-column prop="updatedAt" label="更新时间" align="center"/>
                <el-table-column prop="action" label="操作" fixed="right" align="center">
                    <template #default="scope">
                        <el-tooltip content="编辑" placement="top">
                            <el-button type="primary" :icon="Edit" circle plain @click="openDialog('update',scope.row)" size="small"/>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button type="danger" :icon="Delete" circle plain size="small" @click="deleteItem(scope.row) "/>
                        </el-tooltip>
                        <el-tooltip content="积分记录" placement="top">
                            <el-button type="success" :icon="Wallet" circle plain @click="openDialog('points',scope.row)" size="small"/>
                        </el-tooltip>
                        <el-tooltip content="比赛记录" placement="top">
                            <el-button :icon="Memo" circle plain @click="openDialog('match-record',scope.row)" size="small"/>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            :total="tableData.total"
            v-model:current-page="tableData.page"
            v-model:page-size="tableData.size"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
        <dialog-add-edit ref="dialogRef" @update="getList"></dialog-add-edit>
        <dialog-points ref="dialogPointsRef" @update="getList"></dialog-points>
        <dialog-match-record ref="dialogMatchRecordRef" @update="getList"></dialog-match-record>
    </div>

</template>
<script setup>
import { ref, reactive, useTemplateRef, onMounted } from 'vue'
import { Delete, Refresh, Edit, Search, Plus, Memo, Wallet, Select } from '@element-plus/icons-vue'
import userApi from 'api/model/platform-user.js'
import userPointsApi from 'api/model/user-points.js'

import DialogAddEdit from './dialog-add-edit.vue'
import DialogPoints from './dialog-points.vue'
import dialogMatchRecord from './dialog-match-record.vue'

import avatar from './img/avatar.png'

/**
 * 打开编辑弹窗
 */
const dialogEditRef = useTemplateRef('dialogRef')
const dialogPointsRef = useTemplateRef('dialogPointsRef')
const dialogMatchRecordRef = useTemplateRef('dialogMatchRecordRef')

function openDialog (type, item) {
    if (type === 'points') {
        dialogPointsRef.value.openDialog(type, item)
    } else if (type === 'match-record') {
        dialogMatchRecordRef.value.openDialog(type, item)
    } else {
        dialogEditRef.value.openDialog(type, item)
    }
}

/**
 * 搜索相关字段
 */
const searchform = reactive({
    nickname: '',
    phone: '',
})

/**
 * 表格相关字段
 */
const tableData = reactive({
    list: [],
    total: 0,
    page: 1,
    size: 10
})

/**
 *  获取列表
 */
async function getList () {
    const { code, data } = await userApi.list.get({
        page: tableData.page,
        size: tableData.size,
        nickname: searchform.nickname,
        phone: searchform.phone,
    })
    if (code === 200) {
        const { list = [], total } = data
        tableData.list = list.map(item => {
            return {
                ...item,
                // avatarUrl
            }
        })
        tableData.total = total
    } else {
        tableData.list = []
        tableData.total = 0
    }
}

getList()

/**
 * 分页的每页数量改变
 * @param data
 */
function handleSizeChange (data) {
    tableData.size = data
    tableData.page = 1
    getList()
}

/**
 * 分页的页码改变
 * @param data
 */
function handlePageChange (data) {
    tableData.page = data
    getList()
}

// 重置操作
function onRefresh () {
    searchform.nickname = ''
    searchform.phone = ''
    tableData.page = 1
    getList()
}

/**
 * 修改用户积分相关
 */
const currentPoints = ref(0)
const popoverShow = (item) => {
    currentPoints.value = item.currentPoints
}
const updateCurrentPoints = (item) => {
    ElMessageBox.confirm('此操作将修改用户积分, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        console.log(item)
        const { code, data = [] } = await userPointsApi.updateUserPoints.post({
            userId: item.id,
            currentPoints: currentPoints.value
        })
        if (code === 200) {
            getList()
            ElMessage.success('修改成功')
        } else {
            ElMessage.error(data.msg)
        }
    }).catch(() => {
        ElMessage.info('取消修改')
    })
}

/**
 * 删除用户操作
 */
function deleteItem (item) {
    /*删除二次确认*/
    ElMessageBox.confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const { code, data = [] } = await userApi.delete.get({ id: item.id })
        if (code === 200) {
            tableData.page = 1
            getList()
            ElMessage.success('删除成功')
        } else {
            ElMessage.error(data.msg)
        }
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}

</script>


<style scoped lang="less">
.edit-points {
    cursor: pointer;

    .edit-title {
        font-size: 16px;
        font-weight: 900;
        line-height: 1.4;
        margin-bottom: 15px;
    }
}
</style>

